<template>
  <div class="navbar">
    <el-row :gutter="15">
      <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="left-panel">
          <i
            class="el-icon-s-unfold"
          ></i>
        </div>
      </el-col>

      <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="right-menu">

          <!-- 用户头像及信息展示 -->
          <el-dropdown @command="handleCommand">
            <div class="avatar-dropdown">
              <img class="user-avatar" :src="avatar" alt="">
              <div class="user-name">
                {{name}}

              </div>  
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="resume" >简历</el-dropdown-item>
              <el-dropdown-item command="github" divided>github地址</el-dropdown-item>
              
              <el-dropdown-item command="gitee" divided>码云地址</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth' // get token from cookie
  export default {
    name: 'Navbar',
    
    computed: {
      ...mapGetters([
        'avatar',
        'name'
      ])
    },
    created(){
      this.$store.dispatch('user/getUserInfo',getToken())
      .then(() => {
        // console.log(res)
      })
    },
    
    methods:{
       handleCommand(command) {
        switch (command){
          case 'logout':
            this.logout()
            break
          case 'resume':
            window.open('https://github.com/chuzhixin/vue-admin-beautiful')
            break
          case 'github':
            window.open('https://github.com/chuzhixin/vue-admin-beautiful')
            break
          case 'gitee':
            window.open('https://gitee.com/chu1204505056/vue-admin-beautiful')
        }
      },
      async logout(){
        await this.$store.dispatch('user/userLogout')
        this.$router.push('/login')
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
  .navbar{
    position: relative;
    height: $base-nav-bar-height;
    padding-right: $base-padding;
    padding-left: $base-padding;
    overflow: hidden;
    user-select: none;
    background: $base-color-white;
    box-shadow: $base-box-shadow;

    .left-panel {
      display: flex;
      align-items: center;
      justify-items: center;
      height: $base-nav-bar-height;

      .fold-unfold {
        color: $base-color-gray;
        cursor: pointer;
      }

      ::v-deep {
        .breadcrumb-container {
          margin-left: 10px;
        }
      }
    }

    .right-panel {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      height: $base-nav-bar-height;

      ::v-deep {
        svg {
          width: 1em;
          height: 1em;
          margin-right: 15px;
          font-size: $base-font-size-small;
          color: $base-color-gray;
          cursor: pointer;
          fill: $base-color-gray;
        }

        button {
          svg {
            margin-right: 0;
            color: $base-color-white;
            cursor: pointer;
            fill: $base-color-white;
          }
        }

        .el-badge {
          margin-right: 15px;
        }
      }
    }
  }
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    height: 50px;
    padding: 0;

    .user-avatar {
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      margin-left: 5px;
      margin-left: 5px;
      cursor: pointer;
    }
  }
</style>